<template>
  <div class="view-container animate__animated animate__fadeInUp">
    <div class="view-title">
      <span>用户详情</span>
    </div>
    <div class="view-content">
      <div class="up-area">
        <div class="avatar-box">
          <img class="user-avatar" src="https://xiaoxiaobaiyang.oss-cn-shenzhen.aliyuncs.com/student_System_img/user.png"  alt="avatar"/>
        </div>
        <div class="base-info-box">
          <el-row class="base-info-row">
            <el-col :span="16">
              <el-text>姓名: {{ userData.name }}</el-text>
            </el-col>
            <el-col :span="8">
              <el-text>用户名: {{ userData.userid }}</el-text>
            </el-col>
          </el-row>
          <el-row class="base-info-row">
            <el-col :span="16">
              <el-text>性别: {{ userData.gender }}</el-text>
            </el-col>
            <el-col :span="8">
              <el-text>角色: {{ getRoleString(userData.role) }}</el-text>
            </el-col>
          </el-row>
        </div>
      </div>
      <div class="partition-line">
        <el-divider content-position="center" border-style="dashed">
          <el-text type="primary">详细信息</el-text>
        </el-divider>
      </div>
      <div class="down-area">
        <div v-if="userData.role === 0"><div style="margin-left: 47%">管理员</div></div>
        <div v-else-if="userData.role === 1"><LeaderCard :user-data="userDataAll"/></div>
        <div v-else-if="userData.role === 2"><CounselorCard :user-data="userDataAll"/></div>
        <div v-else-if="userData.role === 3"><StudentCard :userData="userDataAll"/></div>
        <div v-else-if="userData.role === 4"><FreshmanCard :user-data="userDataAll"/></div>
      </div>


    </div>
  </div>
</template>

<script setup>
// 引入 defineProps 函数
import {defineProps, onMounted, reactive, ref} from 'vue';
import {Setting} from "@element-plus/icons-vue";
import {ElMessage} from "element-plus";
import {getUserById} from "@/api/userApi/userApi.js";
import {getStudentById} from "@/api/studentsApi/studentApi.js";
import {getFreshmanById} from "@/api/freshmanApi/freshmanApi.js";
import {getCounselorById} from "@/api/conunselorApi/counselorApi.js";
import {getLeaderById} from "@/api/leaderApi/leaderApi.js";
import LeaderCard from "@/views/userManage/components/DetailCard/LeaderCard.vue";
import CounselorCard from "@/views/userManage/components/DetailCard/CounselorCard.vue";
import StudentCard from "@/views/userManage/components/DetailCard/StudentCard.vue";
import FreshmanCard from "@/views/userManage/components/DetailCard/FreshmanCard.vue";
/*---------定义变量开始-----------*/
//获取路径中的id
const props = defineProps({
  userid: {
    type: String,
    required: true
  }
});


const userData = ref({
  userid: "",
  name: "",
  gender: "",
  role: 3
})
const userDataAll = ref({})

/*---------定义变量结束-----------*/


/*---------钩子开始-----------*/
onMounted(() => {
  try{
    getUserById(props.userid).then((res) => {
      if(res.status === 200){
        userData.value = res.data
      }
      else{
        ElMessage.error("请求数据失败")
      }
    }).then(() => {
      switch (userData.value.role){
        case 1:
          getLeaderById(userData.value.userid).then((res) => {
              userDataAll.value = res.data
          })
              break
        case 2:
          getCounselorById(userData.value.userid).then((res) => {
            userDataAll.value = res.data
          })
              break
        case 3:
          getStudentById(userData.value.userid).then((res) => {
            userDataAll.value = res.data
          })
              break
        case 4:
          getFreshmanById(userData.value.userid).then((res) => {
            userDataAll.value = res.data
          })
      }
    })
  }catch (error){
    console.log(error)
  }
})

/*---------钩子结束-----------*/

const getRoleString = (i) => {
  switch (i){
    case 0:
      return "管理员"
    case 1:
      return "领导"
    case 2:
      return "辅导员"
    case 3:
      return "学生"
    default:
      return "新生"
  }
}

</script>

<style scoped>
.view-container{
  padding-top: 40px;
  width: 80%;
  overflow: hidden;
}
.view-title{
  font-size: 40px;
  font-weight: bolder;
  margin-bottom: 30px;
}
.view-content{
  width: 100%;
}
.up-area{
  display: grid;
  grid-template-columns: 1fr 2fr;
  justify-items: center;
  border: #99a9bf 2px dashed;
  border-radius: 10px;
  padding: 20px;
}
.avatar-box{
  width: 100%;
}
.user-avatar{
  width: 27vh;
  height: 30vh;
}
.base-info-box{
  width: 80%;
}
.base-info-row{
  width: 100%;
  margin: 40px;
  font-size: 40px;
  font-weight: bold;
}
.down-area{
  width: 100%;
  margin-top: 10px;
  display: grid;
  grid-template-columns: 1fr;
}



</style>
